import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, NgControl, Validators } from '@angular/forms';
import { NzFormTooltipIcon } from 'ng-zorro-antd/form';

// import { NzTableFilterFn, NzTableFilterList, NzTableSortFn, NzTableSortOrder } from 'ng-zorro-antd/table';
// import { threadId } from 'worker_threads';
import { Student } from '../inerface/datatype.service';
import { Grade } from '../inerface/datatype.service';
import { ColumnItem } from '../inerface/datatype.service';

// interface Student {
//   // 班级、姓名、性别、邮箱、电话
//   grade:string,
//   name: string;
//   gender:string,
//   email:string,
//   mobile:string
// }

// interface ColumnItem {
//   name: string;
//   sortOrder: NzTableSortOrder | null;
//   sortFn: NzTableSortFn<Student> | null;
//   listOfFilter: NzTableFilterList;
//   filterFn: NzTableFilterFn<Student> | null;
// }


@Component({
  selector: 'app-table-demo',
  templateUrl: './table-form.component.html',
  styleUrls: ['./table-form.component.scss']
})
export class TableDemoComponent implements OnInit {

  // 班级数组
  public gradeList: String[] = [];

  // 得到原始数据的gradeList,利用set去重
  getgrade() {
    for (let i = 0; i < this.listOfData.length; i++) {
      console.log(this.listOfData[i].grade);
      this.gradeList.push(this.listOfData[i].grade)
      this.gradeList = [...new Set(this.gradeList)]
    }
  }


  // 页标签，跳转界面的标志
  public flag: number = 1;


  // validateForm 数据录入
  validateForm!: FormGroup;
  validateForm2!: FormGroup;
  captchaTooltipIcon: NzFormTooltipIcon = {
    type: 'info-circle',
    theme: 'twotone'
  };

  // // 提交班级数据到Grade的student,注意这里的数据不能直接进行push
  // submitGrade():void{
  //   this.listOfData.push(grade);
  // }

  // 提交表单数据到table中
  submitForm(): void {
    if (this.validateForm.valid) {
      console.log('submit', this.validateForm.value);
      let tmp_grade: Grade = {
        grade: this.validateForm.value.grade,
        student: []
      };
      this.gradeList.push(this.validateForm.value.grade);
      this.listOfData.push(tmp_grade);
    }
  }
  // 提交学生信息表单
  submitForm2(): void {
    if (this.validateForm2.valid) {
      console.log('submit', this.validateForm2.value);
      let tmp_stu: Grade = {
        grade: '',
        student: [
          this.validateForm2.value.grade
        ]
      };
      this.gradeList.push(this.validateForm2.value);
      this.listOfData.push(tmp_stu);
    }
  }





  // 每一行数据的来源
  listOfColumns: ColumnItem[] = [
    {
      name: '姓名',
      grade: '班级',
      gender: '性别',
      email: '邮箱',
      mobile: '电话',
      sortOrder: null,
      sortFn: (a: Student, b: Student) => a.name.localeCompare(b.name),
      // 男女生筛选
      listOfFilter: [
        { text: '男', value: '男' },
        { text: '女', value: '女' }
      ],
      filterFn: (list: string[], item: Student) => list.some(gender => item.gender.indexOf(gender) !== -1),

      // 班级筛选
      listOfFilterOfGrade: [
        { text: '计科1903', value: '计科1903' },
        { text: '计科1904', value: '计科1904' }
      ],
      filterFnByGrade: (list: string[], item: Grade) => list.some(grade => item.grade.indexOf(grade) !== -1)
    },

  ];

  // 存放新增加的学生信息
  tmp_student: Student[] = [];

  // 实例化-学生对象
  listOfData: Grade[] = [
    {
      grade: '计科1901',
      student: [
        {
          name: "小明",
          gender: '男',
          email: '30342342@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1902',
      student: [
        {
          name: "小刚",
          gender: '男',
          email: '30342344@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1903',
      student: [
        {
          name: "小强",
          gender: '男',
          email: '3034542342@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1904',
      student: [
        {
          name: "小芳",
          gender: '女',
          email: '456442@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1901',
      student: [
        {
          name: "小青",
          gender: '女',
          email: '7893124@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1902',
      student: [
        {
          name: "小佳",
          gender: '女',
          email: '32427676@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1903',
      student: [
        {
          name: "小清",
          gender: '女',
          email: '94672@qq.com',
          mobile: '13578655678'
        }]
    },
    {
      grade: '计科1904',
      student: [
        {
          name: "小花",
          gender: '女',
          email: '2345667@qq.com',
          mobile: '13578655678'
        }]
    },


  ];


  // 根据name进行搜索
  trackByName(_: number, item: ColumnItem): string {
    return item.name;
  }

  // // 界面切换
  // changePage() {
  //   this.flag = 2;
  //   console.log(this.listOfData);

  // }//2表示添加学生信息
  // changePage2() {
  //   this.flag = 3;
  // }//3表示添加班级信息

  backTable() {
    this.isVisible=false;
    this.flag =1;
  }

  resetFilters(): void {
    this.listOfColumns.forEach(item => {
      if (item.name === 'Name') {
        item.listOfFilter = [
          { text: '男', value: '男' },
          { text: '女', value: '女' }
        ];
      } else if (item.grade === 'grade') {
        item.listOfFilter = [
          { text: 'London', value: 'London' },
          { text: 'Sidney', value: 'Sidney' }
        ];
      }
    });
  }

  resetSortAndFilters(): void {
    this.listOfColumns.forEach(item => {
      item.sortOrder = null;
    });
    this.resetFilters();
  }

  // 添加学生信息
  isVisible = false;
  constructor(private fb: FormBuilder) { }

  showModal(): void {
    this.isVisible = true;
    this.flag = 2;
  }
  showModal2(): void {
    this.isVisible = true;
    this.flag = 3;
  }

  // 更新班级信息
  handleOk(): void {
    console.log('Button ok clicked!');
    console.log(this.submitForm());
    this.isVisible = false;
    this.flag = 1
  }

  // 更新学生信息
  handleOk2(): void {
    console.log('Button ok clicked!');
    console.log(this.submitForm2());
    this.isVisible = false;
    this.flag = 1
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }


  ngOnInit(): void {
    this.getgrade()
    this.validateForm = this.fb.group({
      grade: [null, [Validators.required]],
      name: [null, [Validators.required]],
      gender: [null, [Validators.required]],
      email: [null, [Validators.email, Validators.required]],
      phoneNumber: [null, [Validators.required]],
    });

    this.validateForm2 = this.fb.group({
      grade: [null, [Validators.required]],
      name: [null, [Validators.required]],
      gender: ['男', [Validators.required]],
      email: [null, [Validators.email, Validators.required]],
      phoneNumber: [null, [Validators.required]],
    });
  }

}